<template>
    <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" @change="getValue" :class="[classStyle]">
    </el-date-picker>
</template>

<script>
    export default {
        data() {
            return {
                value: [],
                obj: {},
                start:'yyyy-MM-dd 00:00:00',
                end:'yyyy-MM-dd 23:59:59',
            }
        },
        props: {
            label: [Array, Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle: {
                type: String,
                default: ''
            }
        },
        mounted() {
            const {key} = this.comData
            this.enumComData([])
            /**
             * dpi 0   cki 1
             * 选择范围--普通日期选择器默认都会调用datePicker
             */
            this.obj.compType = key == 'dpi' ? 0 : 1
            this.$emit('setFormData', this.obj)
        },
        methods: {
            getValue() {
                const {i_key} = this.comData
                this.obj[i_key] = this.value == null ? 
                    [] : [this.value[0].dateFormat(this.start),this.value[1].dateFormat(this.end)]
            },
            editValue(fieldValue){ //不能选择范围或动态筛选时调用
                this.enumComData(fieldValue)
                this.value = fieldValue
                this.$emit('setFormData', this.obj)
            },
            enumComData(val){
                const {i_key,name,type} = this.comData
                this.obj.key = i_key
                this.obj[i_key] = val
                this.obj.chineseName = name
                this.obj.type = type
            },
            dynamicTypeGetValue(fieldValue){
                this.enumComData(fieldValue)
                this.value = fieldValue
                this.$emit('setFormData', this.obj)
            }
        },
    }
</script>

<style lang="less" scoped>
    /deep/ .el-date-editor.el-input.dialog,
    .el-date-editor.el-input__inner.dialog {
        width: 80% !important;
    }

    /deep/ .el-range-editor .el-range-input {
        flex: 3;
    }

    /deep/ .el-date-editor .el-range-separator {
        flex: 1;
    }
</style>